:root{
  --blue: #409EFF;
}
.all-components{

  //float:left;
  //width:350px;
  margin-right:10px;
}

.module-mobile{
  float:left;
  width:425px;
  margin-right:10px;
  padding:10px 0;
  background-color:rgb(243,243,243);
  .mobile{

    //width:443px;
    width:449px;
    height:705px;
    margin:0 auto;
    padding:0 30px;
    background-color:#fff;
    overflow-y: scroll;

    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
      background: rgba(0, 0, 0, 0.05);
      box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.15);
      padding: 0;
      border: none;
      overflow-x: visible;
    }
    &::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.25);
      padding: 0;
      border: none;
      width: 6px;
    }

    .header{

      width:100%;
      height:60px;
      background-image: url("../skin/diy/head-cache.png");
      background-position: 0 0;

      .title{
        text-align:center;
        padding-top:30px;
        font-size:20px;
        font-weight: bold;
        color:#333;
      }
    }

    .body{
      border:1px solid #e2e2e2;
      min-height:645px;
      .layout{
        position:relative;
        border:dashed 1px #cdcdcd;
        height:auto;
        min-height:50px;
        cursor:pointer;
        margin-bottom:10px;

        &.active{
          border:dashed 1px #409EFF;
          .handle{
            display:block;
          }
        }

        .handle{
          display:none;
          position:absolute;
          width:100%;

          .handle-item{
            position:absolute;
            width:25px;
            height:25px;
            background-color:#409EFF;
            text-align:center;
            line-height:25px;
            color:#fff;
            cursor:pointer;
          }

          .rubbish {
            top:-1px;
            left:-26px;
          }

          .up{
            top:-1px;
            right:-26px;
          }

          .down{
            top:30px;
            right:-26px;
          }

          .copy{
            top:30px;
            left:-26px;
          }

        }
        .field{

          .rubik{

            &.notice{
              display:flex;
              align-items: center;
              height:50px;
              line-height:50px;
              //font-size: 24px;
              i{
                width: 50px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                color: #ff652b;
                //font-size: 30px;
              }
              .message{
                width: 100%;
                height: 50px;
                overflow: hidden;
              }

            }
            &.category{
              display:flex;
              flex-wrap:wrap;
              justify-content: space-around;
              align-items: center;
              .category-item{

                margin:10px 0;
                padding:0 10px;
                text-align: center;
                img{
                  width:100%;
                  max-width:75px;
                  //height:100px;
                }
              }
            }

            &.product{
              //display:flex;
              //flex-wrap:wrap;
              //justify-content: space-around;
              //align-items: center;
              &:after{
                display: block;
                content: "";
                clear:both;
              }
              .product-item{

                width:50%;
                float:left;
                margin:10px 0;
                padding:0 10px;
                text-align: center;
                .img{
                  img{
                    width:100%;
                  }
                }
                .name{
                  text-align:left;
                  //text-overflow: -o-ellipsis-lastline;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  line-clamp: 2;
                  -webkit-box-orient: vertical;
                  font-weight: bold;
                  font-size: 14px;
                  min-height:41px;
                  line-height: 1.5;
                }
                .sale{
                  text-align:left;
                  color: #777;
                  font-size: 13px;
                  margin-top: 5px;
                }
                .price-buy{
                  display: flex;
                  justify-content: space-between;
                  .price{
                    font-weight: bold;
                    color: #f00;
                  }
                  .buy{
                    display: inline-block;
                    background-color: #f00;
                    //-webkit-border-radius: 20px;
                    border-radius: 20px;
                    padding: 0 10px;
                    color: #fff;
                  }

                }

              }
            }

            &.article{
              padding:0 10px;
              .article-title{

                line-height:2;
                text-align: center;

              }
              .article-item{

                display: flex;
                line-height:2;
                justify-content: space-between;
              }
            }
            .cube{

            }
          }

          .rubik{
            position:relative;
            //display: flex;
            //justify-content: space-between;
            min-height:50px;
            &.one,&.two-fifth,&.three-fifth,&.four-fifth{
              height:180px;
            }
            &.half,&.third{
              height:120px;
            }
            &.forth{
              height:94px;
            }
            &.half-half{
              height:186px;
            }
            .cube{
              position:absolute;
              display: flex;
              width:100%;
              justify-content: center;
              align-items: center;
              font-size:15px;
              color:#cdcdcd;
              text-align: center;
              border:dashed 1px #cdcdcd;
              img{
                width: 100%;
                height: 100%;
                position: absolute;
              }
              &.active{
                border:dashed 1px #409EFF;
              }
              &.one{
                width:100%;
                height:180px;
              }
              &.two-fifth.a,&.three-fifth.a,&.four-fifth.a{
                width:40%;
                height:180px;
              }
              &.two-fifth.b{
                top:0;
                left:40%;
                width:60%;
                height:180px;
              }

              &.three-fifth.b,&.three-fifth.c,&.four-fifth.b{
                width:60%;
                height:90px;
              }
              &.three-fifth.b,&.four-fifth.b{
                top:0;
                left:40%;
              }
              &.three-fifth.c{
                top:90px;
                left:40%;
              }
              &.four-fifth.c,&.four-fifth.d{
                width:30%;
                height:90px;
              }
              &.four-fifth.c{
                top:90px;
                left:40%;
              }
              &.four-fifth.d{
                top:90px;
                left:70%;
              }
              &.half.a,&.half.b{

                width:50%;
                height:120px;
              }
              &.half.a{

              }
              &.half.b{
                top:0;
                right:0;

              }

              &.third.a,&.third.b,&.third.c{
                width:33.3%;
                height:120px;
              }
              &.third.a{
                top:0;
                left:0;
              }
              &.third.b{
                top:0;
                left:33.35%;
              }
              &.third.c{
                top:0;
                right:0;
              }
              &.forth.a,&.forth.b,&.forth.c,&.forth.d{
                width:25%;
                height:94px;
              }
              &.forth.a{
                top:0;
                left:0;
              }
              &.forth.b{
                top:0;
                left:25%;
              }
              &.forth.c{
                top:0;
                left:50%;

              }
              &.forth.d{
                top:0;
                right:0;
              }
              &.half-half{
                width:50%;
                height:93px;
                &.a{
                  top:0;
                  left:0;
                }
                &.b{
                  top:0;
                  right:0;
                }
                &.c{
                  top:50%;
                  left:0;
                }
                &.d{
                  top:50%;
                  right:0;
                }
              }
            }
            &.free{
              display:flex;
              justify-content: space-between;
              flex-wrap: wrap;

              .cube{
                position: relative;
                flex: none;
                overflow: hidden;

                img{
                  top:0;
                  left:0;
                }
                .placeholder{
                  position: absolute;
                  top:33%;
                }
                &.col-1{
                  width:100%;
                  height:0;
                  padding-bottom:100%;
                }
                &.col-2{
                  width:50%;
                  height:0;
                  padding-bottom:50%;
                }
                &.col-3{
                  width:33.3%;
                  height:0;
                  padding-bottom:33.3%;
                }
                &.col-4{
                  width:25%;
                  height:0;
                  padding-bottom:25%;
                }
                &.col-5{
                  width:20%;
                  height:0;
                  padding-bottom:20%;
                }
                &.col-6{
                  width:16.6%;
                  height:0;
                  padding-bottom:16.6%;
                }
                &.col-7{
                  width:14.27%;
                  height:0;
                  padding-bottom:14.27%;
                }
                &.col-8{
                  width:12.5%;
                  height:0;
                  padding-bottom:12.5%;
                }
                &.col-9{
                  width:11.1%;
                  height:0;
                  padding-bottom:11.1%;
                }
                &.col-10{
                  width:10%;
                  height:0;
                  padding-bottom:10%;
                }


              }
            }
            &.free_table{
              .mofang-table{

                position:relative;
                width:100%;
                thead{
                  visibility: collapse;
                }
                tr{

                  td{
                    border:dashed 1px #cdcdcd;
                    position:relative;
                    &.origin{

                    }
                    .placeholder{
                      position: absolute;
                      top:33%;
                      text-align: center;
                      width: 100%;

                      -webkit-user-select:none;
                      -moz-user-select:none;
                      -ms-user-select:none;
                      user-select:none;
                    }
                    &.active{
                      border-color: #0a7dbb;
                    }

                    each(range(10),{
                      @width : 100% / @value;
                      &.col-@{value}{
                        width: @width;
                        height:0;
                        //padding-bottom: @width;
                        @row_nums:2,3,4,5,6,7,8,9,10;
                        each(@row_nums, .(@r, @i ){
                          &[rowspan='@{r}']{
                            //padding-bottom:@width * @r;
                          }
                        });
                      }

                    });

                  }
                }

              }
            }

            &.two-a{
              height:180px;
              text-align: center;
              .cube{
                display: flex;
                width:100%;
                justify-content: center;
                align-items: center;
                font-size:15px;
                color:#cdcdcd;
                //font-weight:bold;
              }

            }


          }

        }
      }
    }
  }
}

.edit-panel{

  float:left;
  width: calc( 100% - 460px );
  margin-left:20px;

  .panel{

    .panel-item{

      &.layout-image{

        .type-group{
          height:auto;
          &:after{
            content:"";
            display:block;
            clear: both;
          }
          .type{
            width:160px;
            cursor:pointer;
            border:solid 1px #e0e0e0;
            float:left;
            padding:5px 5px 0 5px;
            margin:10px 10px 0 0;
            text-align:center;
            line-height:50px;
            &.active{
              border:solid 1px var(--blue);
            }
            .image{
              height:75px;
              img{
                width:100%;
              }
            }
            .name{
              height:40px;
              line-height:40px;
            }


          }
        }

        .type-edit{

          padding:20px;

        }
      }
    }
  }
}

a{
  margin:0 5px;
  cursor:pointer;
  &.button{

    &.active{

      color:val(--blue);
    }

    i{
      font-size:16px;

      &.gray{
        color:#DCDFE6
      }
    }
  }
}
.right-mouse-panel{
  position: absolute;
  z-index: 1;
  width: 100px;
  height: auto;
  line-height: 2.5;
  border: solid 1px #999;
  background-color: #fff;
  text-align: center;
  box-shadow: #cdcdcd 2px 2px 2px;
  li{
    border-bottom: solid 1px #cdcdcd;
    &:hover{
      background-color:#00acff;
    }
    &:last-child{
      border-bottom:none;
    }
  }

}